<template>
	<view style="position: relative;height: 40rpx;">
		<view class="music-playing" :class="{active:play}">
		    <text class="step-1"></text>
		    <text class="step-2"></text>
		    <text class="step-3"></text>
		    <text class="step-4"></text>
		    <text class="step-5"></text>
		    <text class="step-6"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"v-loading2",
		data() {
			return {
				
			};
		},
		props:['play']
	}
</script>

<style lang="scss">
.music-playing {
    width: 80rpx;
    height: 40rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.active text{animation: music-play 0.8s linear infinite;}

.music-playing text {
    width: 8rpx;
    border-radius: 5rpx;
    background-color: red;
		
}

.music-playing .step-1 {
    animation-delay:.2s;
		height: 10rpx;
}

.music-playing .step-2 {
    animation-delay:.4s;
		height: 25rpx;
}

.music-playing .step-3 {
    animation-delay:.6s;
		height: 40rpx;
}

.music-playing .step-4 {
    animation-delay:.8s;
		height: 40rpx;
}
.music-playing .step-5 {
    animation-delay:1s;
		height: 25rpx;
}
.music-playing .step-6 {
    animation-delay:1.2s;
		height: 10rpx;
}

@keyframes music-play {

    0% {

        height: 10rpx;

    }

    50% {

        height: 40rpx;

    }

    100% {

        height: 10rpx;

    }

}
</style>
